<template>
  <div class="index-box" ref="index">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="search" ref="search">
          <el-form :inline="true" :model="searchForm" size="small" ref="searchForm" @submit.native.prevent
            class="demo-form-inline" id="searchBox">
            <el-form-item prop="nickname">
                <el-input v-model="searchForm.nickname" clearable placeholder="用户昵称"></el-input>
            </el-form-item>
            <el-form-item prop="fullname">
                <el-input v-model="searchForm.fullname" clearable placeholder="真实姓名"></el-input>
            </el-form-item>
            <el-form-item prop="telephone">
                <el-input v-model="searchForm.telephone" clearable placeholder="用户手机号"></el-input>
            </el-form-item>

            <el-form-item prop="realNameStatus">
              <el-select filterable clearable v-model="searchForm.realNameStatus" placeholder="实名状态">
                <el-option label="已实名" value="1" ></el-option>
                <el-option label="未实名" value="0" ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="auditStatus">
              <el-select filterable clearable v-model="searchForm.auditStatus" placeholder="审核状态">
                <el-option label="待审核" value="0" ></el-option>
                <el-option label="已通过" value="1" ></el-option>
                <el-option label="驳回" value="2" ></el-option>
              </el-select>
            </el-form-item>
           <el-form-item prop="applyTime">
             <el-date-picker v-model="applyTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="申请开始日期" end-placeholder="申请结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
           <el-form-item prop="auditTime">
             <el-date-picker v-model="auditTime" type="daterange" align="right" unlink-panels range-separator="至"
               start-placeholder="审核开始日期" end-placeholder="审核结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
               :picker-options="pickerOptions">
             </el-date-picker>
           </el-form-item>
            <el-form-item class="clearfix">
              <el-button type="primary" @click="handleSearch()" icon="el-icon-search">搜索</el-button>
              <el-button icon="el-icon-refresh" size="small" @click="resetSeach">重置</el-button>
              <el-button
                style="margin-left:10px"
                type="warning"
                icon="el-icon-download"
                size="small"
                :loading="btnLoading"
                v-has="'audit:spreaderAudit:down'"
                @click="handleExport"
              >导出</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table" ref="table">
          <el-table :data="dataList" style="width: 100%" row-key="id" border :height="tableHeight" v-loading="loading"  stripe>
            <el-table-column prop="nickname" label="用户昵称" v-if="!hideTableColumn.includes('name')" align="center"></el-table-column>
            <el-table-column prop="fullname" label="真实姓名" v-if="!hideTableColumn.includes('idCard')" align="center"></el-table-column>
            <el-table-column prop="telephone" label="手机号" v-if="!hideTableColumn.includes('openingBank')" align="center">
              <template #default="scope">
                  <span style="cursor: pointer;text-decoration:underline" @click="handleGoUserPath()">{{scope.row.telephone}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="实名状态" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="userTypeName" label="是否商户" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="applyTime" label="申请时间" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="remark" label="备注" v-if="!hideTableColumn.includes('bankAccount')" align="center" width="280" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="auditUserName" label="审核人" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="auditTime" label="审核时间" v-if="!hideTableColumn.includes('bankAccount')" align="center"></el-table-column>
            <el-table-column prop="pullIntoTime" label="状态" v-if="!hideTableColumn.includes('time')" align="center">
              <template slot-scope="scope">
              	<el-tag
              		:type="scope.row.auditStatus=='0'?'primary':scope.row.auditStatus=='1'?'success':'warning'">
              		{{scope.row.auditStatus=='0'?'待审核':scope.row.auditStatus=='1'?'已通过':'驳回'}}
              	</el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="name" label="操作" width="140" fixed="right" align="center">
              <template #default="scope">
                  <el-button  size="medium" type="text" icon="el-icon-document-checked" @click="handleAudit(scope.row)" v-has="'audit:spreaderAudit:audit'" v-if="scope.row.auditStatus=='0'">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page" ref="page">
          <MyPagination
            :total="total"
            :page.sync="searchForm.pageNum"
            :limit.sync="searchForm.pageSize"
            @pagination="dataInfo"
          />
        </div>
      </el-col>
    </el-row>

    <!-- 推广者审核	 -->
    <el-dialog title="推广者审核" width="600px" :close-on-click-modal="false" v-dialogDrag :visible.sync="auditVisible" @close="auditVisible = false">
    	<el-form id="userDialog" :model="form" label-position="right" :rules="rules" ref="form">
    		<el-form-item label="审核:" prop="status" label-width="125px" style="width:100%">
    			<el-radio-group v-model="form.status">
    				<el-radio label="1">通过</el-radio>
    				<el-radio label="2">不通过</el-radio>
    			</el-radio-group>
    		</el-form-item>
    		<el-form-item label="备注:" prop="remark" label-width="125px">
    			<el-input v-model="form.remark" type="textarea" autocomplete="off" :rows="4" placeholder="请填写审核备注">
    			</el-input>
    		</el-form-item>
    	</el-form>
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="auditVisible = false" size="small">取 消</el-button>
    		<el-button type="primary" @click="handleAuditSpreaderSubmit('form')" size="small" :loading="btnLoading">确 定
    		</el-button>
    	</div>
    </el-dialog>

  </div>
</template>

<script>
  import common from '@/api/api';
  import {
    promoterReviewauditList, promoterReviewaudit, promoterReviewauditExport
  } from '@/api/getData'
  import option from '../../common/option.js';
  export default {
    data() {
      return {
        loading: false,
        btnLoading:false,
        applyTime:[],
        auditTime:[],
        searchForm: {
          nickname:'',
          fullname:'',
          telephone:'',
          realNameStatus:'',
          auditStatus:'',
          pageNum:1,
          pageSize:20,
        },
        tableColumn:[],
        hideTableColumn:[],/*自定义表格列需要隐藏的*/
        tableColumnType:'staffManagement',/*自定义表格列类型传参*/
        tableHeight:0,//table 高度
        dataList:[],
        total: 0,
        auditVisible: false,
        form: {
        	id : '',
        	status: '',
        	remark:'',
        },
        rules: {
        	status: [{
        		required: true,
        		message: '请选择是否审核通过',
        		trigger: 'blur'
        	}]
        },
      }
    },
    computed: {
      pickerOptions: () => {
        return option.pickerOptions;
      }
    },
    mounted() {
      this.dataInfo();
      this.$nextTick(() => {
          this.tableHeight = this.$refs.index.offsetHeight - this.$refs.search.offsetHeight  - this.$refs.page.offsetHeight - 35;
      })
    },
    methods: {
      handleGoUserPath(){
        this.$router.push({path:'/user/userManage'});
      },
      /** 导出按钮操作 */
       handleExport() {
        let data = this.addDateRange(this.searchForm, this.auditTime, 'auditStartTime', 'auditEndTime');
        data = this.addDateRange(this.searchForm, this.applyTime, 'applyStartTime', 'applyEndTime');
         this.$modal.confirm('是否确认导出搜索数据项？').then(() => {
           this.btnLoading = true;
           return promoterReviewauditExport(data);
         }).then(response => {
           this.$download.name(response.msg);
           this.btnLoading = false;
         }).catch(() => {});
      },
      handleAudit(row){
        this.form.id = row.id;
        this.form.status = '';
        this.form.remark = '';
        this.auditVisible = true;
      },
      /** 推广者审核提交 **/
      handleAuditSpreaderSubmit(formName) {
      	this.$refs[formName].validate((valid) => {
      		if (valid) {
      			this.btnLoading = true;
      			promoterReviewaudit(this.form).then((result) => {
      				if (result.code == 200) {
      					this.$message.success(result.msg);
      					this.auditVisible = false;
      					this.dataInfo();
      				} else {
      					this.$message.error(result.msg);
      				}
      				this.btnLoading = false;
      			});
      		}
      	})
      },
      handleSearch(){
          this.page = 1;
          this.dataInfo();
      },
      resetSeach(){
        this.resetForm('searchForm');
        this.auditTime = [];
        this.applyTime = [];
        this.dataInfo();
      },
      async dataInfo() {
        try {
          let data = this.addDateRange(this.searchForm, this.auditTime, 'auditStartTime', 'auditEndTime');
          data = this.addDateRange(this.searchForm, this.applyTime, 'applyStartTime', 'applyEndTime');
          this.loading = true;
          const result = await promoterReviewauditList(data)
          if (result.code == 200) {
            this.total = result.total;
            this.dataList = result.rows;
          } else {
            this.$message.error(result.msg);
          }
          this.loading = false;
        } catch (err) {
          this.loading = false;
          console.log(err)
        }
      },

    }
  }
</script>

<style scoped lang="scss">
  .userDetail /deep/ .el-form-item{
    margin-bottom: 5px;
  }
  .el-table .el-dropdown-link{
      cursor: pointer;
      color: #61997A;
      margin-left: 5px;
  }
    .leftDialog{
      height:540px;
      overflow-y: auto;
    }
    .activeVerticalBox .activeItem{
      color:#61997A;
      cursor: pointer;
      margin: 0px;
      text-align: center;
      height:20px;
      line-height: 20px;
    }
    .activeVerticalBox .el-dropdown{
      display: flex;
      justify-content: center;
      color:#61997A;
      cursor: pointer;
    }
    .activeCheckedBox{
      border-top: 1px solid #ddd;
      padding:10px;
      height:52px;
      .el-tag{
        margin-right:10px;
      }
    }
    .rateBox /deep/ .el-rate__icon{
      margin-right: 0px;
    }
    .rateBox>p{
      margin: 0px;
    }
    .rateBox>p> /deep/ .el-rate{
      height:25px;
      line-height:25px;
      display:flex;
    }
    .rateBox>p> /deep/ .el-rate .el-rate__item{
      display:flex;
      align-items: center;
    }
    .rateBox .rateText{
      width:60px;
    }
    .rateBox .content{
      display: flex;
    }
    .rateBox .el-tooltip{
          width: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          display: inline-block;
    }
</style>
